<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <title>Line Chart example</title>
    <gui:resources components="['chart']" mode='debug'/>
</head>

<body class='yui-skin-sam'>

    <h2>${params.chartTitle}</h2>

    <div id='lineChart' style="width:600px; height: 400px"></div>

    <gui:lineChart
        renderTo="lineChart"
        data="[
            [ month: 'January', rent: 880.00, utilities: 894.68 ],
            [ month: 'February', rent: 880.00, utilities: 901.35 ],
            [ month: 'March', rent: 880.00, utilities: 889.32 ],
            [ month: 'April', rent: 880.00, utilities: 884.71 ],
            [ month: 'May', rent: 910.00, utilities: 879.811 ],
            [ month: 'June', rent: 910.00, utilities: 897.95 ]
        ]"
        seriesDefs="[
            [
                rent:'Majors',
                style:[
                        color: 0xff0000,
                        lineSize: 5,
                        size: 10
                ]
            ],
            [utilities:'Utilities'],
            [utilities:'Rent']
        ]"
        yAxis="[
            type:'numeric',
            format: [prefix:'$', thousandsSeparator: ',', decimalPlaces: 2],
            config:[
                minimum:800,
                maximum:940
            ]
        ]"
        style="[
            legend: [display: 'right'],
            background: [
                color: 0xFF0FF0,
                alpha: 0.1
            ],
            padding: 20,
            border: [
                color: 0x995566,
                size: 2
            ],
            font: [
                name: 'Verdana',
                color: 0x995566,
                size: 12
            ]
        ]"
    />

</body>
</html>